<html>

<head>
    <meta charset="UTF-8" />
    <title>
        初始化Vue
    </title>
    <script type='text/javascript' src="../01初识/js/vue.js"></script>
</head>

<body>

    <!-- 容器 div -->
    <div id="root">
        <h1>hello 差值语法 {{name.toUpperCase()}} {{adreess}}</h1>

        <button>点我更改信息</button>
        <h2>哈撒给</h2>
        <h3>aonituo</h3>
        <hr />
        <h5></h5>
        <a href="https://www.baidu.com">点我去百度1</a>
        <nav></nav>
        <a v-bind:href="url.toUpperCase()" :x="hello">点我去百度2</a>
        <nav></nav>
        <a :href="subdata.url">subData of url</a>
        <nav></nav> 单项数据绑定:<input type="text" :value="name">
        <!-- v-model:双向绑定 没法  一般应用在表单 元素上 input select等 -->
        <nav></nav> 单项数据绑定:<input type="text" v-model:value="name">
        <!-- v-bind: 绑定数据  简写成  ： -->


        <!-- 简写 -->
        <nav></nav> 单项数据绑定简写:<input type="text" :value="name">
        <nav></nav> 单项数据绑定简写:<input type="text" v-model="name">
    </div>
    <!-- ///{{表达式}} -->

    <!-- 表达式   js代码 语句

-->
    <!-- <div class="root">
        <h1>hello 差值语法 {{name}}</h1>
    </div> 

    <div class="root">
        <h1>hello 差值语法 {{name}}</h1>  标签体
        指令标签属性 语法
    </div> -->
    <script type="text/javascript">
        Vue.config.productionTip = false
        // vue 示例
        const x = new Vue({
            el: "#root",//".root",// "#root",//el指定容器 类似指正  值一般为 css  如果class  则.
            data: {
                name: "dwa", age: 18, adreess: '背景',
                url: 'https://www.baidu.com',
                hello: '你好',
                subdata: {
                    name: "开始",
                    url: 'https://www.jianshu.com'
                }
            },///data数据供el 指定的容器使用
        })

    ///容器和vuew 一一对应
    // axios({
    //     url:'https://www.baidu.com'
    // })
    </script>

</body>

</html>